<template>
	<view class="my">
		<view class="my__body">	
			<view class="my__body__header">
				<view class="my__body__header__header">
					<image class="avatar" src="../../static/logo.png" mode="aspectFit"/>
					<view class="center">
						<text>Lost</text>
						<text class="address">地区:中国重庆渝北</text>
					</view>
					<text class="iconfont icon-youjiantou1"></text>
				</view>
				<view class="my__body__header__footer">
					<view class="left">
						<view class="left__item">
							<text>16</text>
							<text>关注</text>
						</view>
						<view class="left__item">
							<text>2</text>
							<text>粉丝</text>
						</view>
						<view class="left__item">
							<text>9</text>
							<text>访客</text>
						</view>
						
					</view>
					<text class="iconfont icon-shezhi1 set"></text>
				</view>
			</view>
			<view class="my__body__main">
				<view class="my__body__main__header">
					<text>动态</text>
					<text>分享</text>
					<text>点赞</text>
					<text class="line"></text>
				</view>
				<view class="my__body__main__swiper">
					
				</view>
			</view>
		</view>
		<Tabbar :current="4"/>
	</view>
</template>

<script setup>
	import Tabbar from '@/components/tabbar/tabbar.vue'
</script>

<style lang="scss" scoped>
.my{
	height: 100%;
	&__body{
		height: calc(100% - 100upx);
		display: flex;
		flex-direction: column;
		align-items: center;
		.avatar{
			width: 80upx;
			height: 80upx;
			border-radius: 10upx;
		}
		&__header{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			padding-bottom: 50upx;
			background-color: #4562ff;
			&__header{
				width: 100%;
				padding: 20upx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 20upx;
				color: #fff;
				font-size: 30upx;
				.center{
					flex: 1;
					display: flex;
					flex-direction: column;
				}
				.address{
					font-size:20upx;
				}
			}
			&__footer{
				width: 100%;
				color: #fff;
				background-color: #4562ff;
				display: flex;
				padding: 8upx 20upx 25upx;
				box-sizing: border-box;
				justify-content: space-between;
				align-items: center;
				>.left{
					display: flex;
					gap: 30upx;
					font-size:25upx;
					.left__item{
						font-size: 20upx;
						display: flex;
						flex-direction: column;
						gap: 5upx;
						align-items: center;
					}
				}
				.set{
					padding: 6upx 16upx;
					background-color: #a0afff;
					border-radius: 20upx;
				}
			}
				
		}
	
	&__main{
		width: 100%;
		border-radius: 20upx;
		margin-top: -40upx;
		&__header{
			position: relative;
			background-color: #fff;
			padding: 30upx 0;
			display: flex;
			border-radius: 30upx 30upx 0 0;
			align-items: center;
			justify-content: center;
			gap: 50upx;
			font-size: 25upx;
			.line{
				position: absolute;
				width:100upx;
				height: 4upx;
				bottom: 10upx;
				background-color: #d35400;
			}
		}
	}
	}

	.iconfont{
		font-size: 30upx;
	}
	
}
</style>
